<#assign propsJson="${propsJson}"?eval />
<template>
  <div style="height: 100%">
    <div :style="imgStyle"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgStyle: {
        borderWidth: <#if propsJson.borderhavelabel??>"${propsJson.borderhavelabel?string(propsJson.borderwidth, "0")}px"<#else>"0px"</#if>,
        borderColor: "${propsJson.bordercolor}",
        borderStyle: "${propsJson.borderalign}",
        width: "100%",
        height: "100%",
      <#if propsJson.backImage?? && (propsJson.backImage?length>0) > 
        backgroundImage: "url(" + require('./${resourcePath}/${propsJson.backImage}') + ")",
      <#elseif propsJson.backDefaultImageName?? && (propsJson.backDefaultImageName?length>0) >
        backgroundImage: "url(" + require('./${resourcePath}/${propsJson.backDefaultImageName}') + ")",
      <#elseif propsJson.backimage?? && (propsJson.backimage?length>0)>
        backgroundImage: "url(" + require('./${resourcePath}/${propsJson.backimage}') + ")",
      </#if>
        borderRadius: "${propsJson.backradius}px",
        backgroundSize: <#if propsJson.backShowImage??>"${propsJson.backShowImage?string("100% 100%", "0")}"<#else>"100% 100%"</#if>,
        backgroundRepeat: "no-repeat"
      }
    }
  }
}
</script>

<style>
</style>
